<template>
    <div class="app-container">


        <div class="head_options u-f u-f-ac u-fw">
            <button class="sub_btn font14 text_white bg_blue" @click="addMaterial"
                v-if="permissions.indexOf('/screenadv/addMaterial') != -1">{{ $t("添加广告图片") }}</button>
        </div>

        <div>
            <el-table :data="tableData">
                <el-table-column prop="name" :label="$t('名称')"></el-table-column>
                <el-table-column prop="file" :label="$t('图片')">
                    <template slot-scope="{ row }">
                        <img class="avatar" :src="row.file" />
                    </template>
                </el-table-column>
                <el-table-column prop="type" :label="$t('文件类型')">
                    <template slot-scope="{ row }">
                        {{ row.type == '0' ? '默认' : row.type == '1' ? '小程序' : '外部链接url' }}
                    </template>
                </el-table-column>
                <el-table-column prop="url" :label="$t('路径')">
                    <template slot-scope="{ row }">
                        {{ row.type == '0' ? '无' : row.url }}
                    </template>
                </el-table-column>
                <el-table-column prop="appid" :label="$t('appid')">
                    <template slot-scope="{ row }">
                        {{ row.type == '1' ? row.appid : '无' }}
                    </template>

                </el-table-column>
                <el-table-column :label="$t('操作')" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="updataDetail(scope.row)">{{ $t("查看") }}</el-button>
                        <el-button type="danger" size="mini" @click="deletes(scope.row)"
                            v-if="permissions.indexOf('/screenadv/deleteMaterial') != -1">{{ $t("删除") }}</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <div class="pagination_box">
                <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="page_size"
                    layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
            </div> -->
        </div>

        <!-- 添加广告图片 -->
        <el-dialog :title="action_type == 0 ? $t('添加广告图片') : $t('编辑广告图片')" width="900px" :visible.sync="showUpdate"
            :close-on-click-modal="false" @close="dialogClose">
            <div class="order_detail">
                <div class="ipt_list u-f u-f-ac">
                    <p class="lable u-f u-f-ac">
                        <span class="font14 text_black">{{ $t('名称') }}：</span>
                    </p>
                    <el-input v-model="addFrom.name" :placeholder="$t('请输入素材名称')"></el-input>
                </div>
                <div class="radio_list u-f u-f-ac">
                    <p class="lable u-f u-f-ac">
                        <span class="font14 text_black">{{ $t('文件类型') }}：</span>
                    </p>
                    <el-radio-group v-model="addFrom.file_type" @change="file_typeChange">
                        <el-radio label="0">{{ $t('默认') }}</el-radio>
                        <el-radio label="1">{{ $t('跳转小程序') }}</el-radio>
                        <el-radio label="2">{{ $t('跳转url') }}</el-radio>
                    </el-radio-group>
                </div>
                <div class="ipt_list u-f u-f-ac" v-if="addFrom.file_type == 1">
                    <p class="lable u-f u-f-ac">
                        <span class="font14 text_black">{{ $t('appID') }}：</span>
                    </p>
                    <el-input v-model="addFrom.appid" :placeholder="$t('请输入appID')"></el-input>
                </div>
                <div class="ipt_list u-f u-f-ac" v-if="addFrom.file_type != 0">
                    <p class="lable u-f u-f-ac">
                        <span class="font14 text_black">{{ $t('url地址') }}：</span>
                    </p>
                    <el-input v-model="addFrom.url" :placeholder="$t('请输入url地址')"></el-input>
                    <span style="color: red; padding-left: 10px;">
                        {{ this.filtersUrlText(addFrom.file_type) }}</span>
                </div>

                <div class="upload_list u-f">
                    <p class="lable u-f">
                        <span class="font14 text_black">{{ $t('上传') }}{{ $t('图片') }}：</span>
                    </p>
                    <el-upload :action="protocol + '//cdb.workair.vip/operate/screenadv/fileUpload'"
                        :headers="{ token, ocode }" name="img_file" :data="{ type: addFrom.file_type }"
                        :file-list="fileList" :limit="1" :on-exceed="handleExceed" :on-success="handleSuccess"
                        :on-remove="handleRemove" :on-error="handleError" list-type="picture">
                        <el-button size="small" type="primary">{{ $t('点击上传') }}</el-button>
                    </el-upload>
                </div>
                <button class="update_btn font12 bg_blue text_white" @click="updateSubmit">{{ $t('提交') }}</button>
            </div>
        </el-dialog>
        <!-- 查看图片 -->
        <el-dialog :title="$t('查看素材')" :visible.sync="showDetail" :close-on-click-modal="false">
            <img class="detail_img" :src="viewFrom.url" />
            <!-- <video class="detail_video" :src="viewFrom.url" controls="controls"
                v-if="viewFrom.file_type == 'video'"></video> -->
        </el-dialog>

        <agent-list ref="agentList" @hide="closeAgentList"></agent-list>
        <refresh @click="handleRefresh"></refresh>
    </div>
</template>

<script>
import util from "@/assets/js/util.js";
import agentList from "components/agent-list/agent-list.vue";
import { mapState } from "vuex";
export default {
    name: "screenadv-materialList",
    data() {
        let that = this;
        return {
            page: 1,
            page_size: 20,
            total: 0,
            protocol: window.location.protocol,
            name: "",
            clientVal: 0,
            agent: '',
            aid: '',
            tableData: [],
            showDetail: false,
            showUpdate: false,
            addFrom: {
                name: "",
                file_type: "0",
                image_id: "",
                url: "",
                appid: ""
            },
            fileList: [],
            viewFrom: {
                file_type: "0",
                url: ""
            },
            //0 新增  1修改
            action_type: 0
        };
    },
    computed: {
        ...mapState(["token", "ocode", "permissions"])
    },
    components: {
        agentList,
    },
    mounted() {
        this.getData();
    },

    methods: {
        filtersUrlText(type) {
            if (type == 1) {
                return '跳转的小程序页面地址:如 pages/login/login'
            } else if (type == 2) {
                return '跳转的外网地址:如 www.baicu.com'
            }
            return ' 23223'
        },
        handleRefresh() {
            this.page = 1
            this.page_size = 20
            this.name = ''
            this.clientVal = 0
            this.agent = "";
            this.aid = "";
            this.getData()
        },
        getData(type) {
            if (type == 'search') { this.page = 1 }
            util
                .$http("/screenadv/miniAdvList?page=" + this.page, {
                    page_size: this.page_size,
                    type: this.clientVal,
                    name: this.name,
                    agency_id: this.aid
                })
                .then(res => {
                    if (res.code == 1) {
                        // this.tableData = res.data;

                      this.tableData = res.data.map(e=>{
                            return {
                                ...e.data,
                                ...e
                            }
                        })
                        console.log(this.tableData)
                        // let addFrom = {
                        //     name: "test",
                        //     type: "0",
                        //     img: "http://tfs.alipayobjects.com/images/partner/TB1XtO4cBVrDuNjm2G1XXcA3XXa",
                        //     url: "123",
                        //     appid: "456"
                        // }
                        // this.tableData.push(addFrom)

                    }
                });
        },
        openAgentList() {
            this.$refs.agentList.show();
        },
        closeAgentList(data) {
            this.agent = data.name;
            this.aid = data.id;
        },
        clearAgent() {
            this.agent = "";
            this.aid = "";
        },
        addMaterial() {
            this.action_type = 0
            this.showUpdate = true;
            this.resetFrom()
            this.fileList = [];

        },
        //10.30查看
        updataDetail(row) {
            this.action_type = 1
            // this.viewFrom = {
            //     file_type: row.type,
            //     url: row.file
            // };
            // this.addFrom = Object.assign(this.addFrom,JSON.parse(JSON.stringify(row)))
            this.viewFrom = {
                // file_type: row.type,
                url: row.file
            };
            this.showDetail = true;

        },
        handleCurrentChange(val) {
            this.page = Number(val);
            this.getData()
        },

        handleSuccess(response) {
            this.addFrom.image_id = response.msg;
        },
        handleRemove() {
            this.addFrom.image_id = "";
        },
        handleError(err) {
            this.$message({
                message: this.$t("上传失败"),
                type: "warning"
            });
        },
        handleExceed() {
            this.$message({
                message: this.$t("只能上传一张"),
                type: "warning"
            });
        },
        updateSubmit() {
            util
                .$http("/screenadv/addMiniprogram", {
                    name: this.addFrom.name,
                    type: this.addFrom.file_type,
                    img: this.addFrom.image_id,
                    url: this.addFrom.url,
                    appid: this.addFrom.appid,
                })
                .then(res => {
                    debugger
                    if (res.code == 1) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        this.resetFrom()
                        this.fileList = [];
                        this.getData();
                        this.showUpdate = false;
                    }
                });
        },
        deletes(row) {
            this.$confirm(this.$t("是否要删除当前广告素材"))
                .then(() => {
                    util
                        .$http("/screenadv/miniAdvDel", {
                            id: row.id
                        })
                        .then(res => {
                            if (res.code == 1) {
                                this.$message({
                                    message: res.msg,
                                    type: "success"
                                });
                                this.getData();
                            }
                        });
                })
                .catch(() => { });
        },
        resetFrom() {
            this.addFrom = {
                name: "",
                file_type: "0",
                image_id: "",
                url: "",
                appid: ""
            }
        },
        dialogClose() {
            // this.resetFrom()
        },
        file_typeChange(e) {
            this.addFrom.url = ""
            this.addFrom.appid = ""
        }
    }
};
</script>

<style scoped>
.head_search {
    margin-bottom: 20px;
}

.head_search .ipt_box {
    width: 260px;
    margin-right: 20px;
}

.head_search .ipt_box .el-input {
    width: 200px;
}

.head_search .select_box {
    width: 260px;
    margin-right: 20px;
}

.head_search .select_box .el-select {
    width: 200px;
}

.head_search .switch_box {
    width: 151px;
    margin-right: 20px;
}

.head_search .div_box {
    margin-right: 20px;
}

.head_search .div_box .content {
    width: 170px;
    height: 40px;
    padding-left: 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px 0 0 4px;
    transition: border 0.3s;
    box-sizing: border-box;
}

.head_search .div_box .content:active {
    border-color: #409eff;
}

.head_search .div_box .btn {
    width: 60px;
    height: 40px;
    border: 0;
    outline: 0;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    box-sizing: border-box;
}

.head_search .sub_btn {
    width: 70px;
    height: 40px;
    border: 0;
    outline: 0;
    cursor: pointer;
    border-radius: 4px;
}

.head_tip {
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ebeef5;
}

.head_options .sub_btn {
    height: 34px;
    border: 0;
    outline: 0;
    padding: 0 15px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 20px;
}

.head_options .txt_list {
    font-weight: bold;
    margin-right: 25px;
}

.iconfont {
    font-size: 15px;
    margin-right: 5px;
}

.el-button--mini,
.el-button--mini.is-round {
    padding: 7px 10px;
}

.pagination_box {
    padding-top: 30px;
}

.pagination_box .el-pagination {
    display: flex;
    justify-content: flex-end;
}

.order_detail .ipt_list {
    margin-bottom: 20px;
}

.order_detail .ipt_list .lable {
    width: 100px;
    margin: 0;
}

.order_detail .ipt_list .el-input {
    width: 200px;
}

.order_detail .radio_list {
    margin-bottom: 20px;
}

.order_detail .radio_list .lable {
    width: 100px;
    margin: 0;
}

.order_detail .upload_list .lable {
    width: 100px;
    margin: 0;
}

.order_detail .upload_list .tip {
    cursor: pointer;
    width: 300px;
    margin: 0 0 0 15px;
}

.order_detail .update_btn {
    cursor: pointer;
    padding: 10px 20px;
    border: 0;
    outline: 0;
    border-radius: 4px;
    margin-top: 40px;
}

.detail_img {
    max-width: 900px;
    height: auto;
}

.detail_video {
    width: 600px;
    height: 350px;
}

.avatar {
    width: 40px;
    height: 40px;
}
</style>
